<template>
  <div class="main">
    <h3 class="title">DORM INFO MANAGE</h3>
    <div class="search">
      <el-card>
        <div slot="header">
          <span>条件查询</span>
        </div>
        <div class="search-container">
          <el-row :gutter="10" type="flex" justify="center">
            <el-col :span="2">
              <label for="search-name">宿舍名称:</label>
            </el-col>
            <el-col :span="4">
              <el-input
                id="search-name"
                v-model="dormSearch.name"
                clearable
                placeholder="请输入内容"
              />
            </el-col>
            <el-col :span="2" :offset="2">
              <label for="search-dorm">宿舍类型:</label>
            </el-col>
            <el-col :span="6">
              <el-select v-model="dormSearch.type" disabled clearable placeholder="">
                <el-option label="该选项无效" value="-1" />
                <el-option label="男生宿舍" value="0" />
                <el-option label="女生宿舍" value="1" />
                <el-option label="未定" value="2" />
              </el-select>
            </el-col>
          </el-row>

          <el-row :gutter="20" type="flex" justify="center" style="margin-top: 20px">
            <el-col :span="3">
              <el-button
                class="search-btn"
                @click="clear"
              >clear</el-button>
            </el-col>
            <el-col :span="3">
              <el-button
                class="search-btn"
                @click="askSaveClass"
              >新增宿舍</el-button>
            </el-col>
            <el-col :span="3">
              <el-button
                type="danger"
                class="search-btn"
                @click="mock"
              >mock</el-button>
            </el-col>
            <el-col :span="3">
              <el-button
                type="primary"
                class="search-btn"
                @click="search"
              >查询</el-button>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
    <el-card>
      <div slot="header">
        <span>宿舍信息</span>
      </div>
      <!-- card body -->
      <el-table :data="dormList" style="width: 100%">
        <el-table-column type="index" label="#" width="50" />
        <el-table-column prop="name" label="宿舍名称" width="150" />
        <el-table-column prop="type" :formatter="classTypeFormatter" label="宿舍类型" width="130" />
        <el-table-column prop="startTime" :formatter="startTimeFormatter" label="开班时间" width="180" />
        <el-table-column prop="endTime" :formatter="endTimeFormatter" label="结课日期" width="130" />
        <el-table-column prop="position" label="宿舍地点" width="180" />
        <el-table-column prop="bak" label="宿舍描述" width="180" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="askEdit(scope.$index, scope.row.id)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="askDelete(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px; text-align:center"
        :current-page="pagination.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog title="提示" :visible.sync="dialog.delVisible" width="30%">
      <span>是否确认删除</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.delVisible = false">取 消</el-button>
        <el-button type="primary" @click="doDelete">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :before-close="handleCloseEdit" title="宿舍信息" :visible.sync="dialog.formVisible" width="80%">
      <el-form :model="dormForm">
        <div class="sub-title">基本信息</div>
        <el-divider />
        <el-row :gutter="20" type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="宿舍名称" :label-width="formLabelWidth" required>
              <el-input v-model="dormForm.name" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="宿舍类型" :label-width="formLabelWidth" required>
              <el-select v-model="dormForm.type" clearable placeholder="">
                <el-option label="男生宿舍" :value="0" />
                <el-option label="女生宿舍" :value="1" />
                <el-option label="未定" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="宿舍地点" :label-width="formLabelWidth" required>
              <el-input v-model="dormForm.position" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="开班日期" :label-width="formLabelWidth" required>
              <el-date-picker
                v-model="dormForm.startTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结课日期" :label-width="formLabelWidth">
              <el-date-picker
                v-model="dormForm.endTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="宿舍描述" :label-width="formLabelWidth" required>
              <el-input v-model="dormForm.bak" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-right: 20px" @click="handleCloseEdit">取 消</el-button>
        <el-button type="primary" @click="doPost">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDormList, getDormDetail, delDorm, updateDorm, saveDorm } from '@/api/dorm'
import _ from 'lodash'
var Mock = require('mockjs')

export default {
  data() {
    return {
      dormList: [],
      dormSearch: {
        name: '',
        type: '-1'
      },
      dormForm: {
        name: '',
        type: '',
        startTime: '',
        endTime: '',
        bak: ''
      },
      selectedId: 0,
      // pagination setting
      pagination: {
        limit: 10,
        current: 1,
        total: 0
      },
      // dialog
      dialog: {
        delVisible: false,
        formVisible: false
      },
      formLabelWidth: '80px'
    }
  },
  created() {
    this.setDormList()
  },
  methods: {
    classTypeFormatter(row, column) {
      if (row.type === 0) {
        return '男生宿舍'
      }
      if (row.type === 1) {
        return '女生宿舍'
      }

      return '未定'
    },
    startTimeFormatter(row, column) {
      if (row.startTime) {
        return row.startTime.split(' ', 1)
      }

      return row.startTime
    },
    endTimeFormatter(row, column) {
      if (row.endTime) {
        return row.endTime.split(' ', 1)
      }

      return row.endTime
    },
    setDormList() {
      let params = this.dormSearch
      params = _.pickBy(params, item => {
        if (item !== null) {
          return item
        }
      })
      getDormList({
        start: this.pagination.current,
        limit: this.pagination.limit,
        ...params
      }).then(res => {
        this.dormList = res.data.list
        this.pagination.total = res.data.totalRow
      })
    },
    search() {
      this.pagination.current = 1
      this.limit = 10
      this.setDormList()
    },
    handleSizeChange(val) {
      this.pagination.limit = val
      this.pagination.current = 1
      this.setDormList()
    },
    handleCurrentChange(val) {
      this.pagination.current = val
      this.setDormList()
    },
    handleCloseEdit() {
      this.dialog.formVisible = false
      this.dormForm = this.$options.data().dormForm
    },
    askSaveClass() {
      this.dialog.formVisible = true
    },
    async askEdit(index, dormId) {
      const res = await getDormDetail({
        id: dormId
      })
      this.dormForm = res.data

      this.dialog.formVisible = true
    },
    async doPost() {
      // push the new student info if the student id exist, or update the info
      let api = null
      let postObj = {}

      postObj = {
        xyDormInfo: {
          ...this.dormForm
        }
      }

      if (this.dormForm.id !== undefined) {
        api = updateDorm
      } else {
        api = saveDorm
      }

      const res = await api(postObj)

      if (res.code === true) {
        this.$message.success('保存成功!')
      } else {
        this.$message.error('保存失败!')
      }

      this.dialog.formVisible = false
      this.handleCloseEdit()
      this.setDormList()
    },
    askDelete(id) {
      this.dialog.delVisible = true
      this.selectedId = id
    },
    doDelete() {
      delDorm({
        id: this.selectedId
      })

      this.dialog.delVisible = false
      this.setDormList()
    },
    clear() {
      this.dormSearch = this.$options.data().dormSearch
    },
    mock() {
      const Random = Mock.Random
      const dormList = []

      for (let i = 0; i < 1; i++) {
        const dorm = {
          name: Random.cword(4, 8),
          type: Random.integer(0, 2),
          position: Random.csentence(),
          startTime: Random.date('yyyy-MM-dd'),
          endTime: Random.date('yyyy-MM-dd'),
          bak: Random.csentence()
        }

        dormList.push(dorm)
        saveDorm({
          xyDormInfo: {
            ...dormList[i]
          }
        })
      }

      this.setDormList()
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  margin: 0 auto;
  .title {
    text-align: center;
    font-weight: normal;
  }

  .el-card {
    width: 1200px;
    margin: 0 auto;
  }

  .search {
    height: 100%;
    .search-container {
      margin-right: -70px;
    }
    label {
      display: block;
      width: 100%;
      height: 100%;
      font-weight: normal;
      line-height: 40px;
      text-align: center;
    }

    .search-btn {
      width: 100%;
      margin-top: 10px;
    }
  }
}
</style>
